/*
 * @Date: 2022-03-29 12:48:20
 * @LastEditors: Andy
 * @LastEditTime: 2022-04-11 20:12:13
 * @FilePath: /payment/pay/src/pages/AgencyTenant/AgencyTenantAccout.jsx
 */
import React, { useState, useEffect } from 'react';
import Tabs from '../../components/Tabs'
import styles from './index.module.css'
import zhCN from 'antd/es/locale/zh_CN'
import axios from '../../util/axios'
import {
  Form,
  Button,
  Table,
  Popover,
  Modal,
  Radio,
  Col,
  Row,
  Select,
  DatePicker,
  ConfigProvider,


} from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons'
const { RangePicker } = DatePicker


export default function AgencyTenantAccout() {
  const [data, setData] = useState([]);
  const [Lx, setLx] = useState([]);//类型
  const [SH, setSH] = useState([]);//商户
  const [searchForm] = Form.useForm();//搜索
  useEffect(() => {
    gettableData()
  }, [])

  //渲染表格
  const gettableData = () => {
    axios({
      method: 'get',
      url: 'admin/shanghuzhangbian/selectAllShangHuZhangBian',
      params: { limit: 9999, page: 1 }
    }).then(res => {
      // console.log(res.data);
      let dataArr = res.data.JL.map((item, index) => {
        item.key = index
        return item
      });
      setData(dataArr);
      setLx(res.data.LX);
      setSH(res.data.SH);//商户
      console.log(res);
    })

  }
  // 搜索
  const onSubmit = (fieldsValue) => {
   
    const rangeValue = fieldsValue['Time'];
        const values = {
        ...fieldsValue,
        'Time': rangeValue&&[rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      }
    console.log('搜索的表单数据: ', values);
    axios({
      method: 'get',
      url: 'admin/shanghuzhangbian/selectShangHuZhangBian',
      params: {
        limit: 9999,
        page: 1,
        shangHuName: values.shangHuName,
        zhangbianType: values.zhangbianType,
        startTime: values.Time ? values.Time[0] : '',
        endTime: values.Time ? values.Time[1] : ''
      }
    }).then(res => {
      console.log(res);
      if (res.code === 0) {
        let dataArr = res.data.map((item, index) => {
          item.key = index
          return item
        });
        console.log('11111', dataArr);
        setData(dataArr);
      }

    })
  }
  //刷新
  const reload = () => {
    searchForm.resetFields();
    gettableData();
  }
  //表格
  const columns = [
    {
      title: '记录ID',
      dataIndex: 'id',
      align: 'center',
      fixed: 'left',
      sorter: (a, b) => a.id - b.id,
    },
    {
      title: '类型',
      dataIndex: 'leiXing',
      align: 'center',
      sorter: (a, b) => a.leiXing - b.leiXing,
      render: (text, record, index) => {
        return record.leiXing === '充值' ? <span style={{ color: 'greenyellow' }}>充值</span> : record.leiXing === '扣款' ? <span style={{ color: 'red' }}>扣款</span> : record.leiXing == '冲正' ? <span style={{ color: '#b37feb' }}>冲正</span> : record.leiXing == '退款' ? <span style={{ color: '#ffc53d' }}>退款</span> : record.leiXing == '代付' ? <span style={{ color: '#bae7ff' }}>代付</span> : ''
      }
    },
    {
      title: '商户名称',
      dataIndex: 'name',
      width: 150,
      align: 'center',
    },
    {
      title: '用户号',
      dataIndex: 'yongHuId',
      width: 150,
      align: 'center',
    },
    {
      title: '流水号',
      dataIndex: 'liuShuiHao',
      width: 150,
      align: 'center',
    },
    {
      title: '变动前金额',
      dataIndex: 'dangQianYuE',
      width: 150,
      align: 'center',
    },
    {
      title: '变动金额',
      dataIndex: 'money',
      key: '5',
      width: 150,
      align: 'center',
      render: (text, record, index) => {
        return record.money > 0 ? <span style={{ color: 'greenyellow' }}>{record.money}</span> : record.money < 0 ? <span style={{ color: 'red' }}>{record.money}</span> : ''
      }
    },
    {
      title: '变动后金额',
      dataIndex: 'bianDongHouYuE',
      key: '6',
      width: 150,
      align: 'center',
    },
    {
      title: '操作人',
      dataIndex: 'caoZuoRen',
      key: '7',
      width: 150,
      align: 'center',
    },
    {
      title: '操作角色',
      dataIndex: 'caoZuoJueSe',
      sorter: (a, b) => a.caoZuoJueSe - b.caoZuoJueSe,
      key: '8',
      render: (text, record, index) => {
        return record.caoZuoJueSe === '管理员' ? <span style={{ color: 'greenyellow' }}>{record.caoZuoJueSe}</span> : record.caoZuoJueSe === '商家' ? <span style={{ color: 'red' }}>{record.caoZuoJueSe}</span> : ''
      }
    },
    {
      title: '充值时间',
      dataIndex: 'chongZhiTimec',
      align: 'center',
      fixed: 'right',
      width: 100,

    },
  ];


  return (
    <div>
      <Tabs title={'代理商户账变'}>代理商户账变</Tabs>
      <ConfigProvider locale={zhCN}>
        <Row className={styles.requestSearch}>
          <Form
          form={searchForm}
            autoComplete="off"
            layout="inline"
            onFinish={onSubmit}
          >

            <Col span={4}>
              <Form.Item name='shangHuName'>
                <Select placeholder="商户">
                  {
                    SH.map((item, index) => {
                      return (<Select.Option key={index} value={item.name} >{item.name}</Select.Option>)
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={5}>
              <Form.Item name='zhangbianType'>
                <Select placeholder="账变类型">  {
                  Lx.map((item, index) => {
                    return (<Select.Option key={index} value={item.state} >{item.state}</Select.Option>)
                  })
                }
                </Select>
              </Form.Item>
            </Col>
            <Col span={9}>
              <Form.Item name='Time' >
                <RangePicker locale={zhCN} />
              </Form.Item>
            </Col>

            <Col span={2} >
              <Form.Item  >
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                  搜索
                </Button>
              </Form.Item>
            </Col>
            <Col span={2} offset={2} >
              <Form.Item >
                <Button shape="circle" icon={<ReloadOutlined />} onClick={reload} />
              </Form.Item>
            </Col>

          </Form>
        </Row>
        <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 400 }}
          pagination={{ showSizeChanger: true, showQuickJumper: true, }}
        />,
      </ConfigProvider>

    </div>


  )
}
